<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <ui:composition template="/layout/masterPageMain.xhtml">
        <ui:define name="ui-header">
            <title>THỐNG KÊ TÀI KHOẢN</title>
        </ui:define>


        <ui:define name="ui-content">
            <f:metadata>
                <f:event type="preRenderView" listener="#{sys_NguoiDungController.onPageLoad_All_ThongKeTK()}"/>
            </f:metadata>
            
            
           <div class="container content bg-gradient-body">
                <div class="row">
                    <h:form class="sky-form" id="sky-form1">
                        <header style="text-align: center;font-weight: bold">THỐNG KÊ TÀI KHOẢN</header>
                        <fieldset>
                            <div class="row">
                                <div class="col col-1"></div>
                                <c:set value="#{reportController.findAllCP()}" var="vCPID"></c:set>
                                <section class="col col-3" >
                                    <label class="select">
                                        <select name="gender" id="cboCPID">
                                             <c:if test="#{sys_NguoiDungController.findObjUser().isAdmin}">
                                                <option disabled="" selected="" value="-1">-- Chọn CP --</option>
                                            </c:if>
                                            <c:forEach items="#{vCPID}" var="item">
                                                <option value="#{item.getCpid()}">#{item.getCpName()}</option>
                                            </c:forEach>
                                        </select>
                                        <i></i>
                                    </label>
                                </section>
                                <section class="col col-3">
                                    <label class="select">
                                        <select id="cbGame">
                                           <c:if test="#{sys_NguoiDungController.findObjUser().isGame1 || sys_NguoiDungController.findObjUser().isGame2 || sys_NguoiDungController.findObjUser().isGame3}">
                                                 <option value="0">-- Chọn game --</option>
                                            </c:if>
                                           <c:if test="#{sys_NguoiDungController.findObjUser().isGame1}">
                                                 <option value="1">AXOL (Game 1)</option>
                                            </c:if>
                                            <c:if test="#{sys_NguoiDungController.findObjUser().isGame2}">
                                                 <option value="1">Game 2</option>
                                            </c:if>
                                            <c:if test="#{sys_NguoiDungController.findObjUser().isGame3}">
                                                 <option value="1">Game 3</option>
                                            </c:if>
                                        </select>
                                        <i></i>
                                    </label>
                                </section>
                                <section class="col col-3" style="width: 31.7%;">
                                    <label class="select">
                                        <select id="cbHDH">
                                            <option  value="-1">-- Chọn HĐH --</option>
                                            <option value="ip">iOS</option>
                                            <option value="android">Android</option>
                                            <option value="wp">Windows Phone</option>
                                            <option value="windows">PC</option>
                                            <option value="web">Web</option>
                                        </select>
                                        <i></i>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <div class="col col-1"></div>
                                <section class="col col-3">
                                    <div class="input-group date" id="dateTuNgay">
                                        <input type="text" class="form-control" value="#{utilsController.getCurrentDate()}" readonly="true" placeholder="Từ ngày"/>
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                    </div>
                                </section>
                                <section class="col col-3">
                                    <div class="input-group date" id="dateDenNgay">
                                        <input type="text" class="form-control" value="#{utilsController.getCurrentDate()}" readonly="true" placeholder="Từ ngày"/>
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                                    </div>
                                </section>
                                <section class="col col-4">
                                     <div class="input-group-btn" style="padding-right: 2px;">
                                           <button class="btn-u rounded" style="margin-right: 2px;" type="button" onclick="RPT_ThongKeTaiKhoan_Click(1,builtParam());"><i class="fa fa-bars"></i>Thống kê</button>
                                            <button  data-toggle="dropdown" class="btn-u rounded" type="button" ><i class="fa fa-bar-chart-o"></i>Xem Chart
                                            </button>
                                           <ul class="dropdown-menu" style="margin-left: 106px;">
                                                  <li><a href="javascript:void(0)" onclick="RPT_ThongKeTaiKhoan_Click(2,builtParam());">Biểu đồ tròn</a></li>
                                                  <li class="divider"></li>
                                                  <li><a href="javascript:void(0)" onclick="RPT_ThongKeTaiKhoan_Click(4,builtParam());">Biểu đồ theo ngày</a></li>
                                                  <li><a href="javascript:void(0)" onclick="RPT_ThongKeTaiKhoan_Click(5,builtParam());">Biểu đồ theo tháng</a></li>
                                                
                                              </ul>
                                        </div>
                                    
                                </section>
                            </div>

                        </fieldset>

                    </h:form>
                </div>
            </div>
            <h:form id="frmCommand">
               
                <ui:include src="#{rPT_ThongKeTaiKhoanController.page}"></ui:include>
                <p:remoteCommand name="cmdThongKe"  actionListener="#{rPT_ThongKeTaiKhoanController.cmd_RPT_ThongKeTaiKhoan_ThongKe_Click}" update=":frmCommand"></p:remoteCommand>
                <p:remoteCommand name="cmdExcel"  actionListener="#{rPT_ThongKeTaiKhoanController.cmd_RPT_ThongKeTaiKhoan_Excel_Click}" oncomplete="downloadExcelFile()" update=":frmCommand"></p:remoteCommand>
                <p:remoteCommand name="cmdChart"  actionListener="#{rPT_ThongKeTaiKhoanController.cmd_RPT_ThongKeTaiKhoan_Chart_Click}" update=":frmCommand"></p:remoteCommand>
               
            </h:form>
            <h:form id="frmExcel">
                <p:commandButton value="excel" icon="excelIcon" style="display: none" id="bntExportExcel" ajax="false">
                    <p:fileDownload value="#{rPT_ThongKeTaiKhoanController.fileExporter}"/>
                </p:commandButton>
            </h:form>
                
            <div style="float: right">
                <a class="btn-u rounded" href="javascript:void(0)" style="padding-bottom: 6px;padding-top: 6px;" onclick="RPT_ThongKeTaiKhoan_Click(3,builtParam());">
                <i class="fa fa-file-text-o"></i>Xuất Excel
            </a>
            </div>
            <br/>
            <br/>
             
            <script type="text/javascript">
                                        function builtParam() {
                                            //console.log($('#dateTuNgay input').datepicker("getDate"));
                                            var params = {};
                                            params.cpID = $('#cboCPID').val();
                                            params.game = $('#cbGame').val();
                                            params.hdh = $('#cbHDH').val();
                                            params.tungay = $('#dateTuNgay input').val();
                                            params.denngay = $('#dateDenNgay input').val();
                                            return params;
                                        }
                                        $(document).ready(function() {
                                            $.handleDatePickersWithIcon('dateTuNgay','dd/mm/yyyy');
                                            $.handleDatePickersWithIcon('dateDenNgay','dd/mm/yyyy');
                                        });
                                        function downloadExcelFile(){
                                            $(PrimeFaces.escapeClientId('frmExcel:bntExportExcel')).click();
                                            //alert($(PrimeFaces.escapeClientId('frmCommand:bntExportExcel')).val());
                                        }
            </script>


        </ui:define>
    </ui:composition> 
</html>